src/pages/posts/[slug].astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---
import { getCollection, type CollectionEntry } from 'astro:content';
import PostLayout from '../../layouts/PostLayout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('posts');
  return posts.map((post: CollectionEntry<'posts'>) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props as { post: CollectionEntry<'posts'> };
const { Content } = await post.render();
---

<PostLayout title={post.data.title}>
  <Content />
</PostLayout>